<template>
  <div class="my-virtual-table">
    <virtual-scroll
      ref="virtualScroll"
      :data="list"
      :item-size="41"
      key-prop="id"
      @change="(virtualList) => (tableData = virtualList)"
    >
      <el-table
        :data="tableData"
        height="400px"
        row-key="id"
        size="mini"
        @sort-change="onSortChange"
        border
        @header-dragend="changeColWidth"
      >
        <virtual-column
          align="center"
          width="40"
          type="selection"
        ></virtual-column>
        <el-table-column align="center" label="索引" prop="index">
        </el-table-column>
        <el-table-column
          label="操作"
          :width="getCacheWidth('操作')"
          align="center"
        >
          <template slot-scope="scope">
            <slot name="operateBtns" :scope="scope"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in dataSource.cols"
          :key="item.prop"
          :sortable="item.prop && !item.children"
          :prop="item.prop"
          :label="item.name"
          :width="getCacheWidth(item.name, item.width)"
          resizable
          align="center"
        >
          <template slot-scope="scope" v-if="!item.children">
            <slot :name="item.prop" :scope="scope">
              <div class="content">{{ scope.row[item.prop] }}</div>
            </slot>
          </template>
          <template slot="header" slot-scope="scope">
            <slot :name="item.prop + 'Header'" :scope="scope">
              <span>
                <span @click.stop="noop" v-if="!item.children">
                  <el-popover
                    placement="top-start"
                    title="筛选列表"
                    trigger="click"
                    width="180"
                  >
                    <template v-if="keys[item.prop]?.key">
                      <el-radio-group
                        size="mini"
                        v-model="keys[item.prop].operate"
                        @input="changeM"
                        class="virtual-my-radio-group"
                      >
                        <el-radio
                          v-for="item in operates"
                          :label="item.operate"
                          :value="item.operate"
                          :key="item.operate"
                          >{{ item.label }}</el-radio
                        >
                      </el-radio-group>

                      <el-input
                        size="mini"
                        clearable
                        @input="changeM"
                        v-model="keys[item.prop].value"
                        class="virtural-input"
                      />
                    </template>
                    <span slot="reference">
                      {{ scope.column.label }}
                      <i
                        class="el-icon-arrow-down"
                        :class="getClass(keys[item.prop]?.value)"
                      ></i>
                    </span>
                  </el-popover>
                </span>
                <slot :name="item.prop + 'Operate'" :scope="scope"></slot>
              </span>
            </slot>
          </template>
          <el-table-column
            v-for="item in item.children"
            :key="item.prop"
            :sortable="item.prop"
            :prop="item.prop"
            :label="item.name"
            :width="120"
            resizable
            align="center"
          >
            <template slot-scope="scope" v-if="!item.children">
              <slot :name="item.prop" :scope="scope">
                <div class="content">{{ scope.row[item.prop] }}</div>
              </slot>
            </template>
            <template slot="header" slot-scope="scope">
              <span>
                <span @click.stop="noop">
                  <el-popover
                    placement="top-start"
                    title="筛选列表"
                    trigger="click"
                    width="180"
                  >
                    <template v-if="keys[item.prop]?.key">
                      <el-radio-group
                        size="mini"
                        v-model="keys[item.prop].operate"
                        @input="changeM"
                      >
                        <el-radio
                          v-for="item in operates"
                          :label="item.operate"
                          :value="item.operate"
                          :key="item.operate"
                          >{{ item.label }}</el-radio
                        >
                      </el-radio-group>

                      <el-input
                        size="mini"
                        clearable
                        @input="changeM"
                        v-model="keys[item.prop].value"
                        debounce
                      />
                    </template>
                    <span slot="reference">
                      {{ scope.column.label }}
                      <i
                        class="el-icon-arrow-down"
                        :class="getClass(keys[item.prop]?.value)"
                      ></i>
                    </span>
                  </el-popover>
                </span>
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </virtual-scroll>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="dataSource.pageSizes || [500, 1000, 2000, 99999]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :hide-on-single-page="isHiddenSingle"
    >
    </el-pagination>
  </div>
</template>

<script>
import VirtualScroll from "./../virtual-scroll/el-table-virtual-scroll";
import VirtualColumn from "./../virtual-scroll/el-table-virtual-column";
import tableMixin from "./tableMixin";
import xStore from "./store";
export default {
  mixins: [tableMixin],
  props: {
    dataSource: {
      type: Object,
      default() {
        return {};
      },
    },
    selection: {
      type: Boolean,
      default: true,
    },
    radio: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    VirtualScroll,
    VirtualColumn,
  },
  data() {
    return {
      tableData: [],
      list: [],
      originList: [],
      cacheWidth: {},
      openDelay: 600,
    };
  },
  methods: {
    getHeaderName(scope) {
      // console.log(scope)
      return scope.column.property + "Header";
    },
    onSortChange({ prop, order }) {
      this.sortProp = {};
      this.sortProp[prop] = order;
      this.currentPage = 1;
      this.filterAllKeHasValue();
    },
  },
  mounted() {
    this.list = this.dataSource.list;
    this.originList = [...this.dataSource.list];
    if (!this.isHiddenSingle) {
      this.filterAllKeHasValue();
      try {
        let cacheWidth = localStorage.getItem("cacheWidth");
        if (cacheWidth) {
          this.cacheWidth = JSON.parse(cacheWidth);
          console.log(cacheWidth, "cacheWidth");
        }
      } catch (error) {
        this.cacheWidth = {};
      }
    }
  },
};
</script>
<style>
.my-virtual-table .cell .content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.my-active {
  color: #409eff;
}
.virtual-my-radio-group .el-radio {
  margin-right: 10px;
  width: 80px;
}
.virtural-input {
  margin-top: 10px;
}
.my-virtual-table .el-table__fixed-body-wrapper {
  width: 100%;
}
</style>